<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="src,idx in imgs" :key="idx">
                <img :src="src" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
window.onload = function() {
    var mySwiper = $('.swiper-container').swiper({
        loop: true,
        direction: 'horizontal',
    });
}

  export default {
    props:['imgs'],
    mounted(){
        this.createSwiper()
    },
    methods:{
        createSwiper(){
            setTimeout(()=>{
                var mySwiper = new Swiper ('.swiper-container', {
                    loop: true,
                    speed:500,
                    autoplay :{
                        disableOnInteraction:false,
                        delay:4000
                    },
                    observer:true,
                    observeParents:true,
                    observeSlideChildren:true,
                    direction:"horizontal",
                })  
            },500)

        }
    }
  };
</script>
<style scoped>
.swiper-slide{
    width: 100%;
    height: 70vh;
    margin-top: 1em;
    border: 1px solid #eee;
    
}
.swiper-slide img{
    border-radius: .5em;
}
</style>